<template>
  <div class="template">
     <div class="search">
      <div class="search-center">
        <div class="search-item">
            <Input clearable
            v-model="search.id"
            placeholder="ID"
            style="width: 150px;"
            ></Input>
        </div>
        <div class="search-item">
            <Input clearable
            v-model="search.nickname"
            placeholder="用户昵称"
            style="width: 150px;"
            ></Input>
        </div>
        <div class="search-item">
            <Input clearable
            v-model="search.phone"
            placeholder="请输入手机号"
            style="width: 150px;"
            ></Input>
        </div>

         <Button
          style="width: 80px;margin-right: 13px;"
          type="primary"
          icon="ios-search"
          @click="searchFn"
          >查询</Button>
           <Button
          type="primary"
          @click="addCoupon"
          >新增优惠券</Button>
      </div>    
    </div>
    <div class="table">
      <Table
        :columns="diyData.columns"
        :data="apiData.tableList"
      >
        <template slot="footer">
             <Page
            :total="apiData.total"
            show-total
            :page-size="search.pageSize"
            :current="search.pageNo"
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange"
            class-name="footer-page"
            show-elevator
            show-sizer
          ></Page>
        </template>
      </Table>
    </div>

    <Modal v-model="diyDom.showModal"  title="推广"  closable mask-closable footer-hide>
          <div class="modal-content" id="qrcode" style="width:200px;height:200px;margin:0 auto;">
             
          </div>
          <div style="text-align:center;margin-top:10px;">小程序跳转地址：/pages/user/couponDetails/couponDetails?code={{diyData.code}}</div>
    </Modal>
  </div>
</template>

<script>
import {apiCouponactivityList,apiCouponactivityDelete,apiCouponactivityPromotion,apiCouponactivityChangeStatus} from '@/api/coupon-package.js'
import QRCode from 'qrcodejs2';
export default {
  name: 'coupon-package',

  data () {
    return {
      search: {
        nickname:'',
        phone:'',
        id:'',
        pageNo: 1,
        pageSize: 10,
      },
      diyDom:{
        showModal:false
      },
      diyData: {
        code:'',
        orderNo:'',
        promotionUrl:'',
        columns: [
          {
            title: '券ID',
            width:'100px',
            key:'id'
          },
           {
            title: '券名称',
            width:'200px',
            key: 'title',
          },
          {
            title: '券类型',
            width:'100px',
           render: (h, params) => {
              return h('div', [
                h('p', params.row.type==1?'直减券':params.row.type==2?'满减券':params.row.type==3?'折扣券':''),
              ])
             }
          },
          {
            title: '优惠',
            width:'200px',
            key: 'discountAmount',
             render: (h, params) => {
              return h('div', [
                h('p', params.row.type==1?'直减券:抵扣'+params.row.discountAmount+'元':params.row.type==2?'满减券:满'+params.row.qualifiedAmount+'减'+params.row.discountAmount:params.row.type==3?'折扣券:'+params.row.rate+'折':''),
              ])
             }
          },
          {
            title: '发放',
            width:'100px',
            key: 'num',
          },
          {
            title: '领取',
            width:'100px',
            key:'getNum',
          },
          {
            title: '使用',
            width:'100px',
            key: 'usedNum',
          },
          {
            title: '状态',
            width:'100px',
            key: 'statusName',
            render: (h, params) => {
              var color=''
              if (params.row.status == 1) {
                color='#2d8cf0'
                
              } else if(params.row.status ==2) {
               color='#000'
              }else if(params.row.status == 3) {
               color='#999'
              }else if(params.row.status == 4) {
               color='#999'
              }
              return h(
                  'div',
                  {
                    style: {
                      color: color
                    }
                  },
                  params.row.statusName
                )
             
            }
          },
          {
            title: '发放时间 ', 
             key: '',
             width:200,
              render: (h, params) => {
              return h('div', [
                h('p','起：'+params.row.beginTime),
                 h('p','止：'+params.row.endTime),
              ])
             }
             
          },

       
           {
            title: '操作',
            width:'200px',
            fixed: 'right',
            render: (h, params) => {
                  return h('div', [
                    
                     h('Button', {
                          props: {
                            size: 'small',
                          },
                          style:{
                              marginRight:'10px',
                              fontSize:'14px',
                          },
                          on: {
                              click: () => {
                                 this.$router.push({
                                    name: "add-coupon",
                                    query: {
                                        id: params.row.id,
                                        // row:JSON.stringify(params.row)
                                    },
                                    });
                              }
                          },                            
                        },
                      '编辑'
                      ),               
                    h('Button', {
                          props: {
                            size: 'small',
                          },
                          style:{
                              marginRight:'10px',
                              fontSize:'14px',
                          },
                          on: {
                              click: () => {
                                apiCouponactivityPromotion({id:params.row.id}).then(res => {
                                  document.getElementById("qrcode").innerHTML=''
                                  this.diyDom.showModal=true
                                  this.diyData.code=params.row.code
                                    this.diyData.promotionUrl=res.data.promotionUrl
                                    setTimeout(() => {
                                        var qrCode = new QRCode(document.getElementById("qrcode"), {
                                          text: res.data.promotionUrl,
                                          width: 200,
                                          height: 200,
                                          colorDark: "#000000",
                                          colorLight: "#ffffff",
                                          correctLevel: QRCode.CorrectLevel.H
                                      });
                                    },500);
                                    
                                 })
                              }
                          },                            
                        },
                      '推广'
                      ),
                      h('Button', {
                          props: {
                            size: 'small',
                          },
                          style:{
                              marginRight:'10px',
                              fontSize:'14px',
                              display:params.row.status==4?'none':''
                          },
                          on: {
                              click: () => {
                                 this.$Modal.confirm({
                                    title: '提示',
                                    content: '确认作废？',
                                    onOk: () => {
                                        apiCouponactivityChangeStatus({
                                            id: params.row.id,
                                            status:4,//1:生效中,2:暂停中,3:已过期,4:已作废
                                        }).then(res => {
                                            this.$Message.success('操作成功');
                                            this.getTableList();
                                        });
                                    }
                                });
                              }
                          },                            
                        },
                      '作废'
                      ),
                      h('Button', {
                          props: {
                            size: 'small',
                          },
                          style:{
                              marginRight:'10px',
                              fontSize:'14px',
                              display:params.row.status==4?'':'none'
                          },
                          on: {
                              click: () => {
                                 this.$Modal.confirm({
                                    title: '提示',
                                    content: '确认删除？',
                                    onOk: () => {
                                        apiCouponactivityDelete({
                                            id: params.row.id
                                        }).then(res => {
                                            this.$Message.success('操作成功');
                                            this.getTableList();
                                        });
                                    }
                                });
                              }
                          },                            
                        },
                      '删除'
                      ),
                  ])
                }
          },
        ]
      },
      apiData: {
        total: 0,
        infor:null,
        tableList: [], 
      }
    }      
  },
  methods: {
        // 分页
    pageChange (e) {
      this.search.pageNo = e
      this.getTableList()
    },
    pageSizeChange (e) {
      this.search.pageSize = e
      this.search.pageNo = 1
      this.getTableList()
    },
    // 搜索
    searchFn () {
      this.search.pageNo = 1
      this.getTableList()
    }, 
    getTableList(){
      this.$store.commit('setSpinShow', true)
      var opt = { ...this.search }
      apiCouponactivityList(opt).then((res) => {
        const {
          list,
          totalCount
        } = res.data
        
        this.apiData.tableList = list
        this.apiData.total = totalCount
      }).finally(() => this.$store.commit('setSpinShow', false))
    },
    addCoupon(){
       this.$router.push({
            name: "add-coupon",
            });
    },

  },
   mounted () {
    this.getTableList()
  },
}
</script>

<style scoped lang="less">
.template{
  width: 100%;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
}
.button-border{
  margin-right: 10px;
  
}
</style>
 